<script>
import UFormItem from "../../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";
import UDatetimePicker from "../../../uni_modules/uview-ui/components/u-datetime-picker/u-datetime-picker.vue";

export default {
  name: "index",
  components: { UFormItem, UDatetimePicker },
  // emits: ['update:modelValue'],
  emits: ['input'],
  props: {
    value: {
      type: String,
      default: ''
    },
  },
  // mixins: [UDatetimePicker],
  data() {
    return {
      show: false,
      date: '',
    }
  },
  computed: {
    v: {
      get() {
        return this.$props.value;
      },
      set(val) {
        this.$emit('input', this.timestampToTime(val));
      }
    }
  },
  methods: {
    // 打开弹窗
    onOpen() {
      this.date = this.$props.value;
      this.show = true;
    },
    // 关闭弹窗
    onClose() {
      this.show = false;
    },
    confirm(val) {
      this.$emit('input', this.timestampToTime(val));
    },
    // 时间戳转换 yyyy-MM-dd HH:mm:ss
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10 ?
          "0" + (date.getMonth() + 1) :
          date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
        ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      return value
    },
  },
}
</script>

<template>
  <view>
    <u-input
        v-model="v"
        border="none"
        placeholder="请选择时间"
        @focus="onOpen"
    ></u-input>
    <u-datetime-picker
        :show="show"
        v-model="date"
        mode="datetime"
        :formatter="formatter"
        datetime-format="YYYY-MM-DD HH:mm:ss"
        @close="onClose"
        @confirm="onClose"
        @cancel="onClose"
    ></u-datetime-picker>
    <!--<u-datetime-picker-->
    <!--    :show="show"-->
    <!--    v-model="date"-->
    <!--    mode="datetime"-->
    <!--    v-bind="$attrs"-->
    <!--    :formatter="formatter"-->
    <!--    datetime-format="YYYY-MM-DD HH:mm:ss"-->
    <!--    @close="onClose"-->
    <!--    @confirm="onClose"-->
    <!--    @cancel="onClose"-->
    <!--&gt;</u-datetime-picker>-->
  </view>
</template>

<style scoped lang="scss">

</style>
